import React, { Component } from "react";
import { Table, Tabs } from "antd";
import "./index.less";
import ScreenFrom from "../../components/screening";
import goodsImg from "../../assets/images/logo.png";
import { Button } from "antd/lib/radio";

const { TabPane } = Tabs;

function callback(key) {
  console.log(key);
}
function handleChange(value) {
  console.log(`selected ${value}`);
}
export default class CommodityHome extends Component {
  toEditor = () => {
    this.props.history.push("/commodity/editor");
  };
  render() {
    const columns = [
      {
        title: "商品",
        render: data => (
          <div className="commodity-goods-list">
            <div>
              <img src={goodsImg} alt="" />
            </div>
            <div className="info">
              <div>高级木椅</div>
              <div className="price">¥1.00</div>
            </div>
          </div>
        )
      },
      {
        title: "库存",
        dataIndex: "age"
      },
      {
        title: "总销量",
        dataIndex: "age"
      },
      {
        title: "序号",
        dataIndex: "age"
      },
      {
        title: "操作",
        align: "right",
        render: () => (
          <div className="commodity-editor" onClick={this.toEditor}>
            编辑
          </div>
        )
      }
    ];
    const data = [
      {
        key: "1",
        name: "John Brown",
        age: 32,
        address: "New York No. 1 Lake Park"
      },
      {
        key: "2",
        name: "Jim Green",
        age: 42,
        address: "London No. 1 Lake Park"
      },
      {
        key: "3",
        name: "Joe Black",
        age: 32,
        address: "Sidney No. 1 Lake Park"
      },
      {
        key: "4",
        name: "Disabled User",
        age: 99,
        address: "Sidney No. 1 Lake Park"
      }
    ];

    // rowSelection object indicates the need for row selection
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      getCheckboxProps: record => ({
        disabled: record.name === "Disabled User", // Column configuration not to be checked
        name: record.name
      })
    };
    return (
      <div className="basic-page manager-home">
        <Tabs onChange={callback} type="card">
          <TabPane tab="销售中" key="1">
            <ScreenFrom />
          </TabPane>
          <TabPane tab="仓库中" key="2">
            <ScreenFrom />
          </TabPane>
        </Tabs>
        <div className="filter-table">
          <Table
            rowSelection={rowSelection}
            columns={columns}
            dataSource={data}
          />
        </div>
        <div>
          <Button>改分组</Button>
          <Button>下 架</Button>
          <Button>删 除</Button>
        </div>
      </div>
    );
  }
}
